<template>
  <view class="rights-content" :class="'vip-' + vipLevel">
    <view
      v-if="vipLevel != 0"
      class="top"
      :style="{ 'padding-top': navHeight + 'px' }"
    >
      <view class="vip-info">
        <view class="expire" v-if="rightsInfo.stopTime && vipLevel > 1">{{ rightsInfo.stopTime || "" }}到期</view>
        <text class="icon icon-current"></text>
        <view class="user">
          <view class="avatar-wrap">
            <image :src="rightsInfo.headImg" mode="" class="avatar" />
          </view>
          <view class="user-right">
            <image class="icon icon-level" :src="rightsInfo.yltLevelNameImg"></image>
            <view class="user-name">{{ rightsInfo.iname }}</view>
          </view>
        </view>
        <view class="rights">
          <text class="rights-text">{{ rightsText }}剩余权益：</text
          >{{ rightsInfo.lastNum }}份
        </view>
        <image :src="vipIcon" mode="" class="update-img" />
        <view class="btn-update">
          <text class="icon icon-update" :class="'icon-update-' + vipLevel" @click="toVip"></text>
        </view>
        <image :src="circleImg" mode="widthFix" class="circle"></image>

      </view>
    </view>
    <view class="scroll-view-wrap">
      <scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight+'px' }"  @scrolltolower="loadMore">
      <ContentItem
        v-for="(item, index) in list"
        :key="index"
        :type="vipLevel == 0 ? 'forever' : ''"
        :item="item"
        @click.native="handleClick(item)"
      />
      <Empty
        v-if="loaded && !list.length"
        :textColor="textColor"
        :text="emptyText"
        fontSize="28"
        :fontWeight="400"
        @titleClick="handleEmptyTextClick"
      />
      <view v-if="list.length && loaded" class="tips" @click="handleTipsClick">{{ tipsText }}</view>
    </scroll-view>
    </view>
    
  </view>
</template>

<script>
import ContentItem from "./ConentItem.vue";
import Empty from "@/components/Empty.vue";

export default {
  components: {
    ContentItem,
    Empty,
  },
  props: {
    vipLevel: [Number, String],
    rightsInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    loaded: Boolean,
    rightsLoaded: Boolean,
    rightsText: String,
    tipsText: String,
    emptyText: String,
  },
  data() {
    return {
      navHeight: getApp().globalData.navHeight,
      circleImg: this.$imgBaseSelf + 'vip/circle.png',
      scrollHeight: 0,
    };
  },
  computed: {
    vipIcon() {
      if(this.vipLevel == 1) {
        return this.$imgBaseSelf + "vip/diamonds-sm.png";
      } else if (this.vipLevel == 2) {
        return this.$imgBaseSelf + "vip/diamonds-sm.png?v=1";
      } else if (this.vipLevel == 3) {
        return this.$imgBaseSelf + "vip/diamonds-md.png?v=1";
      } else if (this.vipLevel == 4) {
        return this.$imgBaseSelf + "vip/diamonds-h.png?v=1";
      }
    },
    textColor() {
      if(this.vipLevel == 0) {
        return '#333333';
      } else if(this.vipLevel == 1) {
        return '#94cdf7';
      } else if(this.vipLevel == 2) {
        return '#C8A3E0';
      } else if(this.vipLevel == 3) {
        return '#BCB192';
      }
    }
  },
  watch: {
    rightsLoaded(newVal) {
      newVal && this.getHeight();
    }
  },
  methods: {
    loadMore() {
      this.$emit("loadMore");
    },
    handleClick(item) {
      this.$emit("itemClick", item);
    },
    handleEmptyTextClick() {
      this.$emit("emptyTextClick");
    },
    handleTipsClick() {
      this.$emit('tipsClick');
    },
    getHeight(){
      var query = uni.createSelectorQuery().in(this);
      var that = this;
      query.select('.scroll-view-wrap').boundingClientRect(function (rect) {
          console.log(rect)
          that.scrollHeight = rect.height;
      }).exec();
    },
    toVip() {
      uni.navigateTo({
         url: '/pagesSub/companyCenter/vip/index',
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.rights-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #0c0116;
  background-image: url($img-base + "ecenter/my-vip-md.png");
  background-size: 100%;
  .top {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
  }
  .vip-info {
    position: relative;
    margin: 0 32rpx;
    margin-top: 20rpx;
    padding: 32rpx;
    height: 274rpx;
    color: #ffffff;
    background-image: url($img-base + 'vip/card-bg-md.png');
    background-size: 100% 100%;

    .expire {
      position: absolute;
      left: 176rpx;
      top: 8rpx;
      font-size: 24rpx;
      color: #835ACE;
    }

    .icon-current {
      position: absolute;
      left: 2rpx;
      top: 2rpx;
      width: 186rpx;
      height: 50rpx;
    }

    .user {
      display: flex;
      align-items: center;
      margin-top: 40rpx;
      margin-bottom: 34rpx;

      .avatar-wrap {
        margin-right: 14rpx;
        padding: 2rpx;
        background: linear-gradient(to bottom, #dbf1f5 100%, #caf0f9 100%);
        border-radius: 50%;
      }

      .avatar {
        width: 69rpx;
        height: 69rpx;
        border-radius: 50%;
      }

      .icon {
        margin-bottom: 12rpx;
      }

      .icon-level {
        width: 158rpx;
        height: 48rpx;
      }
    }

    .rights-text {
      font-size: $uni-font-size-sm;
    }


    .update-img {
      position: absolute;
      bottom: 0;
      right: -28rpx;
      width: 312rpx;
      height: 310rpx;
    }
    .btn-update {
      position: absolute;
      right: 40rpx;
      bottom: 28rpx;
      display: inline-block;
      font-size: $uni-font-size-nor;
      font-weight: bold;
      
      .icon-update {
        width: 164rpx;
        height: 60rpx;
      }

      .icon-update-1 {
        background-image: url($img-base + 'vip/update-sm.png');
      }

      .icon-update-2 {
        background-image: url($img-base + 'vip/update-sm.png');
      }
      
      .icon-update-3 {
        background-image: url($img-base + 'vip/update-md.png');
      }

      .icon-update-4 {
        background-image: url($img-base + 'vip/update-high.png');
      }
    }

    .circle {
      position: absolute;
      right: -50rpx;
      bottom: 0rpx;
      width: 338rpx;
      height: 274rpx;
      z-index: 1;
      pointer-events: none;
    }
  }

  .scroll-view-wrap {
    margin-top: 32rpx;
    flex-grow: 1;
  }
  .scroll-view {
    // height: 1px;
    flex-grow: 1;
    .tips {
      margin: 64rpx 0;
      text-align: center;
      color: #94cdf7;
      padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
    }
  }

  &.vip-0 {
    background: none;
  }

  &.vip-1 {
    background-image: url($img-base + "vip/my-vip-sm.png");
    .vip-info {
      background-image: url($img-base + 'vip/card-bg-sm.png');
    }
    .icon-current {
      background-image: url($img-base + 'vip/curren-level-sm.png');
    }

  }

  &.vip-2 {
    background-color: #000960;
    background-image: url($img-base + "vip/my-vip-sm.png");

    .tips {
      color: #bcb192;
    }
    .user-name {
      color: #FFFFFF;
    }

    .rights {
      color: #BDD4FF;
    }

    .vip-info {
      background-image: url($img-base + 'vip/card-bg-sm.png');
    }
    .icon-current {
      background-image: url($img-base + 'vip/curren-level-sm.png');
    }

    .expire {
      color: #BDD4FF;
    }
  }

  &.vip-3 {
    background-color: #0c0116;
    background-image: url($img-base + "vip/my-vip-md.png");

    .tips {
      color: #C8A3E0;
    }
    .user-name {
      color: #A315A9;
    }

    .rights {
      color: #FFFFFF;
    }

    .vip-info {
      background-image: url($img-base + 'vip/card-bg-md.png');
    }
    .icon-current {
      background-image: url($img-base + 'vip/curren-level-md.png');
    }

    .expire {
      color: #835ACE;
    }
  }

  &.vip-4 {
    background-color: #0c0116;
    background-image: url($img-base + "vip/my-vip-high.png");

    .tips {
      color: #bcb192;
    }
    .user-name {
      color: #ffea9f;
    }

    .rights {
      color: #bbbbbb;
    }

    .vip-info {
      background-image: url($img-base + 'vip/card-bg-high.png');
    }
    .icon-current {
      background-image: url($img-base + 'vip/curren-level-high.png');
    }

    .expire {
      color: #B4B4B4;
    }
  }
}
</style>